<template>
    <div class="body">
        <div class="left_box">
            <img class="logo_sun" src="https://bu.dusays.com/2024/10/02/66fd653febd8f.png" alt="">
            <img class="logo_main" src="https://bu.dusays.com/2024/10/02/66fd5cd0edc5e.png" alt="">
            <img class="logo_cloud" src="https://bu.dusays.com/2024/10/02/66fd5cd0d974a.png" alt="">
            <img class="logo_han" src="https://bu.dusays.com/2024/10/02/66fd5cd0de93c.png" alt="">
        </div>
        <div class="right_box">
            <img class="logo" src="https://bu.dusays.com/2024/10/07/6702b4e883017.png" alt="">
            <div class="login_card">
                <img id="username-image" src="https://bu.dusays.com/2024/10/05/67007f1332a0a.png" alt=""
                    class="card_bird_1">
                <img id="password-image" src="https://bu.dusays.com/2024/10/05/67007f124e3de.png" alt=""
                    class="card_bird_2">
                <el-form v-if="islogin" :model="data.form" ref="formRef" :rules="data.rules">
                    <div class="title">
                        <h1>吱吱农场</h1>
                        <p>农民直供，顾客直购，便捷新鲜</p>
                    </div>
                    <div v-if="islogin" class="login_way">
                        <div class="account_login">
                            <h2 style="color: black;">账号登录</h2>
                        </div>
                        <div class="email_login">
                            <h2 @click="islogin = !islogin" style="color: gray;">邮箱登录</h2>
                        </div>
                    </div>

                    <div v-else class="login_way">
                        <div class="account_login">
                            <h2 @click="islogin = !islogin" style="color: gray;">账号登录</h2>
                        </div>
                        <div class="email_login">
                            <h2 style="color: black;">邮箱登录</h2>
                        </div>
                    </div>

                    <el-form-item prop="username">
                        <div class="account_input">
                            <v-text-field @click="handClick_1" class="account_input_v" v-model="data.form.username"
                                label="用户名" variant="outlined" :rules="[() => !!data.form.username || '用户名为空，请输入用户名']"
                                placeholder="请输入您的用户名" required></v-text-field>
                        </div>
                    </el-form-item>
                    <el-form-item prop="password">
                        <div class="password_input">
                            <v-text-field @click="handClick_2" type="password" class="password_input_v"
                                v-model="data.form.password" label="密码" variant="outlined"
                                :rules="[() => !!data.form.password || '密码为空，请输入密码']" placeholder="请输入您的密码"></v-text-field>
                        </div>
                    </el-form-item>
                    <el-form-item prop="role">
                        <el-select class="select_input" size="large" style="width: 80%" v-model="data.form.role">
                            <el-option value="USER" label="用户"></el-option>
                            <el-option value="FARMER" label="农民"></el-option>
                            <el-option value="ADMIN" label="管理员"></el-option>
                        </el-select>
                    </el-form-item>
                    <div style="margin-left: 60%; margin-top:0; font-size: 1.7vh;">
                        还没有账号?请 <a href="/register">注册</a>
                    </div>
                    <div class="login_btn">
                        <v-btn class="login_btn_v" @click="login()">
                            登录
                        </v-btn>
                    </div>
                </el-form>

                <el-form v-else :model="data.form" ref="formRef_email" :rules="data.rules">
                    <div class="title">
                        <h1>吱吱农场</h1>
                        <p>农民直供，顾客直购，便捷新鲜</p>
                    </div>
                    <div v-if="islogin" class="login_way">
                        <div class="account_login">
                            <h2 style="color: black;">账号登录</h2>
                        </div>
                        <div class="email_login">
                            <h2 @click="islogin = !islogin" style="color: gray;">邮箱登录</h2>
                        </div>
                    </div>

                    <div v-else class="login_way">
                        <div class="account_login">
                            <h2 @click="islogin = !islogin" style="color: gray;">账号登录</h2>
                        </div>
                        <div class="email_login">
                            <h2 style="color: black;">邮箱登录</h2>
                        </div>
                    </div>

                    <el-form-item prop="mailAddress">
                        <div class="account_input">
                            <v-text-field @click="handClick_1" class="account_input_v" v-model="data_mail.form.mailAddress"
                                label="邮箱地址" variant="outlined"
                                :rules="[() => !!data_mail.form.mailAddress || '邮箱为空，请输入邮箱地址']" placeholder="请输入您的邮箱地址"
                                required></v-text-field>
                        </div>
                    </el-form-item>
                    <el-form-item prop="code">
                        <div class="password_input" style="margin-top: -2vh;">
                            <v-otp-input :length="5" max-width="40vh" min-height="8vh"
                                v-model="data_mail.form.code"></v-otp-input>
                        </div>
                    </el-form-item>
                    <a v-if="!isDisabled" @click="code_way()" style="margin-left: 35vh;">发送验证码</a>
                    <a v-else style="margin-left: 30vh;color: gray;">{{ countdown }}s后重新发送验证码</a>
                    <div style="margin-left: 60%; margin-top:0; font-size: 1.7vh;">
                        还没有账号?请 <a href="/register">注册</a>
                    </div>
                    <div class="login_btn">
                        <v-btn v-if="data_mail.form.code != null" class="login_btn_v" @click="email_login()">
                            邮箱登录
                        </v-btn>
                        <v-btn v-else style="background-color: gray;" class="login_btn_v" @click="email_login()">
                            邮箱登录
                        </v-btn>
                    </div>
                </el-form>

            </div>
        </div>
    </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import request from "@/utils/request";
import { ElMessage } from "element-plus";
import router from "@/router";

const islogin = ref(true); //判断登录方式

const code = ref(''); //储存验证码值

//验证码倒计时
const isDisabled = ref(false)
const countdown = ref(60)

const timer = () => {
    isDisabled.value = true
    setInterval(() => {
        if (countdown.value > 0) {
            countdown.value--
        }
        else {
            clearInterval(timer)
            isDisabled.value = false
            countdown.value = 60
        }
    }, 1000)
}

const data = reactive({
    form: { role: 'USER' },
    rules: {
        username: [
            { required: true, message: '', trigger: 'blur' },
        ],
        password: [
            { required: true, message: '', trigger: 'blur' },
        ],
    }
})

const data_mail = reactive({
    form: { role: 'USER' },
    rules: {
        mailAddress: [
            { required: true, message: '', trigger: 'blur' },
        ],
        code: [
            { required: true, message: '', trigger: 'blur' },
        ],
    }
})

const formRef = ref()

const formRef_email = ref()

const login = () => {

    formRef.value.validate((valid) => {
        if (valid) {
            console.log("-");
            console.log(data.form);
            console.log("-");
            request.post('/api/login', data.form).then(res => {
                console.log("获取用户");
                console.log(data.form);

                if(res.data.token){
                  sessionStorage.setItem("token", JSON.stringify(res.data.token));
                  sessionStorage.setItem("uid", JSON.stringify(res.data.uid));
                }

                if (res.code == '200') {
                    ElMessage.success('登录成功')
                    if (data.form.role == 'ADMIN') {
                        router.push('/manager/home')
                        console.log("我是管理员");
                    }
                    else if (data.form.role == 'FARMER') {
                        router.push('/farmer/home')
                        console.log("我是农民");
                    }
                    else if (data.form.role == 'USER') {
                        router.push('/user')
                        console.log("我是用户");
                    }
                    //sessionStorage.setItem('system-user', JSON.stringify(res.data))//将登录的信息存储到本地
                } else {
                    ElMessage.error(res.msg)
                }
            })
        }
    }).catch(error => {
        console.error(error);
    })
}

const code_way = () => {
    timer();
    send_code();
}

const send_code = () => (
    request.post('/api/send', data_mail.form).then(res => {
        console.log(data_mail.form.mailAddress);
        if (res.code == '200') {
            console.log("请求成功");
        }
    })
)

const email_login = () => (
    formRef_email.value.validate((valid) => {
        if (valid) {
            request.post('/api/email_login', data_mail.form).then(res => {
                if (data_mail.form.code == res.data.code) {
                    console.log("验证码正确");
                    ElMessage.success("登录成功")
                    router.push('/user');
                    localStorage.setItem('system-user', JSON.stringify(res.data));//将登录的信息存储到本地
                }
                else {
                    console.log("验证码错误");
                    ElMessage.error("验证码错误");
                }
            })
        }
    })

)

const handClick_1 = () => {
    var usernameImage = document.getElementById('username-image');
    var passwordImage = document.getElementById('password-image');

    usernameImage.style.display = 'flex';
    passwordImage.style.display = 'none';
}

const handClick_2 = () => {
    var usernameImage = document.getElementById('username-image');
    var passwordImage = document.getElementById('password-image');

    usernameImage.style.display = 'none';
    passwordImage.style.display = 'flex';
}



</script>

<style scoped>
.body {
    display: flex;
    height: 100vh;
}

.logo {
    position: absolute;
    display: flex;
    margin-left: 80vh;
    margin-top: 2vh;
    width: 25vh;
    z-index: 2;
}

.card_bird_1 {
    position: absolute;
    width: 25vh;
    margin-top: -16.2vh;
    margin-left: 12vh;
}

.card_bird_2 {
    display: none;
    position: absolute;
    width: 25vh;
    margin-top: -16.2vh;
    margin-left: 12vh;
}


.left_box {
    width: 45%;
    height: 100%;
    background: linear-gradient(to right, #ffffff, #d1e6bd);
    display: flex;
}

.logo_sun {
    width: 90vh;
    position: absolute;
    animation: sun 3s ease-in-out infinite;
    z-index: 2;
}

.logo_main {
    height: 90vh;
    width: 105vh;
    margin-top: 10vh;
    z-index: 1;
}

.logo_cloud {
    position: absolute;
    margin-left: 46vh;
    width: 60vh;
    animation: sun 3s ease-in-out infinite;
    z-index: 0;
}

.logo_han {
    position: absolute;
    width: 3vh;
    margin-top: 47vh;
    margin-left: 28vh;
    animation: fall 3s infinite;
    z-index: 3;
}

@keyframes float {
    0% {
        transform: translate(0);
    }

    50% {
        transform: translate(-5px, -5px);
    }

    100% {
        transform: translate(0);
    }
}

@keyframes sun {
    0% {
        transform: translate(0);
    }

    50% {
        transform: translate(-15px, -15px);
    }

    100% {
        transform: translate(0);
    }
}

@keyframes fall {
    0% {
        transform: translateY(0);
        opacity: 1;
    }

    50% {
        transform: translateY(1.5vh);
        opacity: 0.5;
    }

    100% {
        transform: translateY(2vh);
        opacity: 0;
    }
}


.right_box {
    width: 60%;
    height: 100%;
    background: linear-gradient(to right, #d1e6bd, #afc896);
    display: flex;
}


.login_card {
    width: 50vh;
    height: 72vh;
    background-color: white;
    margin: auto;
    margin-left: 35vh;
    margin-top: 20vh;
    border-radius: 2vh;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    transform-origin: center;
}

.login_card:hover {
    transform: scale(1.01);
    box-shadow: gray 0 0 5px;
}


.title h1 {
    font-size: 6vh;
    font-weight: 600;
    margin-left: 4vh;
    margin-top: 3vh;
}

.title p {
    font-size: 1.8vh;
    color: gray;
    margin-left: 4vh;
}

.login_way {
    display: flex;
    margin-top: 2vh;
    margin-left: 5vh;
    gap: 2vh;
}


.account_input {
    margin: auto;
    margin-top: 2vh;
    padding-bottom: 2vh;
}

.account_input_v {
    height: 9vh;
    width: 40vh;
}

.password_input {
    margin: auto;
}

.password_input_v {
    height: 9vh;
    width: 40vh;
}

.select_input {
    height: 9vh;
    width: 40vh;
    margin: auto;
}

.login_btn {
    height: 6vh;
    width: 40vh;
    margin: auto;
    margin-top: 2vh;
}

.login_btn_v {
    height: 100%;
    width: 100%;
    background-color: #134a00;
    color: white;
    font-size: 2vh;
    font-weight: bold;
}
</style>